<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col span="6">
          <span>【题型】: {{ Questiontype[Topicpreview.questionType] }}</span>
        </el-col>
        <el-col span="6">
          <span>【编号】：{{ Topicpreview.id }}</span>
        </el-col>
        <el-col span="6">
          <span>【难度】: {{ difficultys[Topicpreview.difficulty] }} </span>
        </el-col>
        <el-col span="6">
          <span>【标签】：{{ Topicpreview.tags }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="6">
          <span>【学科】：{{ Topicpreview.subjectName }}</span>
        </el-col>
        <el-col span="6">
          <span>【目录】：{{ Topicpreview.directoryName }}</span>
        </el-col>
        <el-col span="6">
          <span>【方向】：{{ Topicpreview.direction }}</span>
        </el-col>
        <el-col span="6">
          <span></span>
        </el-col>
      </el-row>
      <hr />
      <!-- 题干 -->
      <el-row>
        <el-col>
          <span>【题干】：</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="color: blue">
          <div v-html="Topicpreview.question"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div>
            <span>{{ Questiontype[Topicpreview.questionType] }}</span>
            选项：（以下选中的选项为正确答案）
          </div>
        </el-col>
      </el-row>
      <!-- 单选框 -->
      <el-radio-group v-model="radio" v-if="Topicpreview.questionType === '1'">
        <p
          v-for="(item, index) in Topicpreview.options"
          :key="index"
          style="margin: 10px 0px"
        >
          <el-radio :label="item.isRight"  :disabled="item.isRight === 0">{{
            item.title
          }}</el-radio>
        </p>
      </el-radio-group>
      <!-- 多选框 -->
      <el-checkbox-group
        v-model="radio"
        v-if="Topicpreview.questionType === '2'"
      >
        <p v-for="(item, index) in Topicpreview.options" :key="index" style="padding:5px 0">
          <el-checkbox :true-label="item.isRight" :disabled="item.isRight === 0">{{ item.title }}</el-checkbox>
        </p>
      </el-checkbox-group>
      <hr />
      <!-- 参考答案 -->
      <el-row>
        <el-col>
          <span>【参考答案】：<el-button type="danger" @click="isVideoShow=true">视频答案预览</el-button></span>
          <el-row v-if="isVideoShow">
            <video :src="Topicpreview.videoURL" controls style="height:260px"></video>
          </el-row>
        </el-col>
      </el-row>
      <hr />
      <!-- 答案解析 -->
      <el-row>
          <el-col>
            【答案解析】：<span v-html="Topicpreview.answer" style="display:inline-block"></span>
          </el-col>
      </el-row>
      <hr />
      <!-- 题目备注 -->
      <el-row>
        <el-col>
          <span>【题目备注】：{{Topicpreview.remarks}}</span>
        </el-col>
      </el-row>

      <div style="text-align:right">
        <span slot="footer" class="dialog-footer" style="text-align:right">
        <el-button type="primary" @click="close"
          >关闭</el-button
        >
      </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 题型枚举
      Questiontype: {
        1: '单选题',
        2: '多选题',
        3: '简答题'
      },
      // 难度枚举
      difficultys: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      radio: 1,
      isVideoShow: false
    }
  },
  props: {
    dialogVisible: { type: Boolean, required: true },
    Topicpreview: { required: true }
  },
  methods: {
    handleClose () {
      this.$emit('dialog-close')
      // 手动关闭视频弹窗
      this.isVideoShow = false
    },
    close () {
      // 通知父组件关闭窗口
      this.$emit('dialog-close')
      // 手动关闭视频弹窗
      this.isVideoShow = false
    }
  }
}
</script>

<style scoped lang="scss">
.el-row {
  .el-col {
    span {
      font-size: 14px;
      color: #606266;
      line-height: 36px;
    }
  }
}
</style>
